<template>
	<button
		class="menu-cell" 
		hover-class="btn-hover" 
		:open-type="openType" 
		:session-from="label" 
		@click="openType ? null : $emit('click', path)"
	>
		<image class="menu-icon" :src="icon" mode="aspectFit"></image>
		<view class="menu-label">{{ label }}</view>
		<u-icon name="arrow-right" color="#999999" bold size="28rpx"></u-icon>
	</button>
</template>

<script>
	export default {
		props: {
			icon: String,
			label: String,
			path: String,
			openType: String
		},
	}
</script>

<style lang="scss" scoped>
	.menu-cell {
		padding: 15rpx 0;
		margin: 0;
		background-color: transparent;
		display: flex;
		align-items: center;
		text-align: left;
		&:after {
			border: none;
		}
		.menu-icon {
			width: 64rpx;
			height: 64rpx;
		}
		.menu-label {
			margin-left: 10rpx;
			flex: 1;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 36rpx;
			color: $u-main-color;
		}
	}
</style>